<!-- 库存检查 -->
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getBookStorey } from '../../../api/index'
import CheckOk from './checkok.vue'
import BaseHeader from '../BaseHeader.vue';
import { useRouter } from 'vue-router';
import { addCheckLog } from '../../../api/index';
import { ElMessage } from 'element-plus';
import emitter from '../../../mitt';
import * as XLSX from 'xlsx';  
const show = ref(false)
// const showCheck = () => {
//   show.value = true
// }

// const close = () => {
//   show.value = false
// }
onMounted(() => {
  onSubmit();
})

const total = ref(0);
const router = useRouter();
const currentType = ref('10')

const formItem = reactive({
  name: '',
  classification: '',
  publicationTime:''
})

// 当前筛选table数据
const tableData = reactive<any[]>([]);

// 当前页码
let current = ref(1);

// 当前每页条数
let size = ref(10);

// 检查完毕
const formItemInspection = reactive({
    inspectUser: 'admin',
    type: '10',
    remark: ''
})
let onCheck = () => {
  // show.value = true;
  addCheckLog(formItemInspection).then((res:any) => {
        if(res.code === 200) {           
            ElMessage.success(res.msg);
            emitter.emit('checkOk', true);
        } else {
            ElMessage.error(res.msg);
        }
        
    })
}

const onSubmit = () => {
  const params = {
    name:formItem.name,
    classification:formItem.classification,
    beginTime: formItem.publicationTime[0],
    endTime: formItem.publicationTime[1],
    current: current.value,
    size: size.value
  };
  // console.log(params)
  // return
  getBookStorey(params).then((res: any) => {
    let data = res?.data?.records as any[];
    total.value = res?.data?.total as number;
    tableData.splice(0, tableData.length, ...data);
  })
}

const handleSizeChange = (val: number) => {
  size.value = val;
  onSubmit();
}

const handleCurrentChange = (val: number) => {
  current.value = val;
  onSubmit();
}

const backHome = () =>{
  router.push('/check');
}

const backHomePage=()=>{
  router.push('/');
}

const exportToExcel = ()=> {  
      const data = tableData.map(item => ({  
        '资料名称': item.name,  
        '出版日期': item.publicationTime,  
        '密级': item.classification=='10'?'内部':item.classification=='20'?'秘密':item.classification=='30'?'绝密':'机密',
        '入库数量': item.warehouseNum,
        '库存数量': item.inventoryNum,
        '储位': item.storageLocations,
      }));  
      const ws = XLSX.utils.json_to_sheet(data);  
      const wb = XLSX.utils.book_new();  
      XLSX.utils.book_append_sheet(wb, ws, '检查数据');  
      XLSX.writeFile(wb, '检查数据.xlsx');  
    }  
</script>

<template>
  <BaseHeader title="资料库存" />
  <div class="main-box">
    <el-form :inline="true" :model="formItem" class="demo-form-inline">
      <el-form-item label="资料名称">
        <el-input v-model="formItem.name" placeholder="输入资料名称" clearable style="width: 20vw;"/>
      </el-form-item>
      <el-form-item label="密级">
        <el-select v-model="formItem.classification" placeholder="选择密级" clearable style="width: 20vw;">
          <el-option label="内部" value="内部" />
          <el-option label="秘密" value="秘密" />
          <el-option label="绝密" value="绝密" />
          <el-option label="机密" value="机密" />
        </el-select>
      </el-form-item>
      <el-form-item label="出版日期">
        <!-- <el-date-picker style="width: 20vw;"
        v-model="formItem.publicationTime"
        type="date"
        placeholder="请选择出版日期"
      /> -->
      <el-date-picker
        v-model="formItem.publicationTime"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-value="[new Date(), new Date()]"
        value-format="YYYY-MM-DD"
         format="YYYY-MM-DD"
      />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" circle @click="onSubmit" />
        <el-button type="primary" @click="onCheck">检查完毕</el-button>
        <el-button type="success" @click="exportToExcel">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table  :data="tableData" style="width: 100%;height: 70vh; " class="my-custom-table">
      <el-table-column prop="name" label="资料名称" width="180" />
      <el-table-column prop="publicationTime" label="出版日期" width="180" />
      <el-table-column prop="classification" label="密级" >
        <template #default="{row}">
          {{ row.classification=='10'?'内部':row.classification=='20'?'秘密':row.classification=='30'?'绝密':'机密' }}
        </template>
      </el-table-column>
      <el-table-column prop="warehouseNum" label="入库数量" />
      <el-table-column prop="inventoryNum" label="库存数量" />
      <el-table-column prop="storageLocations" label="储位">
        <template #default="{row}">

           <div v-if="row.storageLocations?.length>2">
            {{ row.storageLocations[0] }}, {{ row.storageLocations[1] }}...
           </div>
           <div v-else>
            {{ row.storageLocations&&row.storageLocations.join(',') }}
          </div>
        </template> 
      </el-table-column>
    </el-table>

    <div class="paginations">
      <el-pagination v-model:current-page="current" :page-size="size" :size="size" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" background class="page"/>
      <el-button @click="backHome">返回</el-button>
      <el-button @click="backHomePage" type="primary">返回首页</el-button>
    </div>
    <CheckOk :centerDialogVisible="show" :type="currentType" @confirm="show=false" @close="show=false"/>
  </div>
</template>

<style scoped lang="less">

  .main-box{
    box-sizing: border-box;
    padding: 5vh;
    /deep/ .el-form-item__label{
      color: rgb(119, 240, 244);
    }
  }

  .paginations{
    position: fixed;
    bottom: 5vh;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    .page {
      margin-right: 10px;
    }
  }
  .text-ellipsis {  
  width: 200px; /* 或者任何你需要的宽度 */  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}
</style>
